<template>
  <div id="map-chart">
    <chart id="chartId" :options="option"></chart>
  </div>
</template>

<script type="text/ecmascript-6">
  import 'echarts/map/js/china.js'
  import echarts from 'echarts'
  export default {
    props: ['mapDatas'],
    data () {
      return {
        option: {
          tooltip: {},
          visualMap: {
            min: 0,
            max: 1500,
            left: 'left',
            top: 'bottom',
            text: ['High', 'Low'],
            seriesIndex: [1],
            inRange: {
              color: ['#e0ffff', '#006edd']
            },
            calculable: true
          },
          geo: {
            map: 'china',
            roam: true,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: 'rgba(0,0,0,0.4)'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              symbolSize: 20,
              symbol: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
              symbolRotate: 35,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: false
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: '#F06C00'
                }
              }
            },
            {
              name: 'categoryA',
              type: 'map',
              geoIndex: 0,
              // tooltip: {show: false},
              data: this.mapDatas
            }
          ]
        }
      }
    },
    methods: {
      drawChinaMap () {
        let myChart = echarts.init(document.getElementById('chartId'))
        myChart.setOption(this.option)
      }
    },
    mounted () {
      this.drawChinaMap()
    },
    created () {}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #map-chart
    width 100%
    height 100%
    & > .echarts, canvas
      width 100% !important
      height 500px !important
</style>
